import React from 'react'
import _ from 'lodash'
import './App.scss'
class App extends React.Component {
    constructor() {
        super()
        this.state = {
            value: '',
            arrs:[]
        }
        // this.arr=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,230]
        this.debounce = _.debounce(this.debounce, 1000)
    }
    debounce = (data)=>{
        const value = this.state.value
        const arr = this.state.arrs.push(value)
        this.setState({
            arrs:this.state.arrs,
            value:''
        })
        console.log(this.state.arrs)
    }
    Keyup = (event) => {
        this.debounce(event.target.velue)
    }
    changeInput = (event) => {
        this.setState({
            value: event.target.value
        })
    }
    //删除
    Remove =(index)=>{        
        this.state.arrs.splice(index,1)
        const arr = this.state.arrs
        // console.log('index'+index)
        // console.log('arr'+arr)
        // console.log('删除'+this.state.arrs)
        this.setState({
            arrs:arr
        })
    }
    render() {
        return <div className='box'>
            <div className='tender'>
                <div className='header'>
                    <input type="text" placeholder='搜索内容' onKeyUp={this.Keyup} onChange={this.changeInput} value={this.state.value} />
                </div>
                <div className='main'>
                    <ul>
                        {
                            this.state.arrs.map((item, index) => {
                                return <li key={index}>
                                    <span className='left'>{item}</span>
                                    <button className='right' onClick={()=>this.Remove(index)} >删除</button>
                                    <div className='clear'></div>
                                </li>
                            })
                        }

                    </ul>
                </div>
            </div>
        </div>
    }
}

export default App